<template>
  <div class="second">
    <div class="dati">
      <div v-for="(question, index) in list" :key="question.questionId" >
        <div class="test-content" v-if="index == page">
         <!--题号+题目-->
          <div class="content-title">{{ index + 1 }}.{{ question.questionContent }}</div>
          <!--四个选项-->
          <van-radio-group v-model="radio">
            <van-radio :name="question.optionA " class="text-x">A&ensp;{{
                question.optionA
              }}</van-radio>
            <van-radio :name="question.optionB " class="text-x">B&ensp;{{
                question.optionB
              }}</van-radio>
            <van-radio :name="question.optionC " class="text-x">C&ensp;{{
                question.optionC
              }}</van-radio>
            <van-radio :name="question.optionD " class="text-x">D&ensp;{{
                question.optionD
              }}</van-radio>

          </van-radio-group>
          <!--进入下一题-->
          <div class="btn">

            <div
                class="next"
                @click="toNext(index, question.questionId)"
                v-if="isShow"
                :class="index == 0 ? 'next' : 'before-next'"

            >
              <span class="spa">下一题</span>
            </div>

            <!-- 提交 -->
            <div
                class="tijiao"
                v-if="!isShow"
                @click="submit(question)"
                :class="index == 0 ? 'next' : 'before-next'"
            >
              <span class="spa"> 完成答题</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "question_day",
  data() {
    return {
      list:[],
      page:0,
      radio: "",
      isShow:true,
      score:0,
      ids:[],
      questionInfos:[],
      question:{
        questionId:'',
        questionType:'',
        questionContent:'',
        optionA:'',
        optionB:'',
        optionC:'',
        optionD:'',
        answer:'',
      }
    }
  },
  mounted() {
    this.getQuestion();
  },
  methods: {
    getQuestion(){
      this.$axios.post("http://localhost:7000/questionDay/randomFive").then(res => {
        this.list=res.data.data;
      })
    },
    toNext(index,id){
      // 1. 判断是否答题，没有则无法跳转到下一题
      if(index === 0) {
        if((this.radio.slice(0,1) === '' || this.radio.slice(0,1) === undefined)) {
          return;
        }
      }
      // 2. 保存答题数据
      let question = { ids: this.radio.slice(0)};
      this.questionInfos[index] = question;
      console.log(this.list[index].answer)
      //每一道题10分，得到选项后判断与后端传来的答案是否一致。一致+10分，不一致不加分
      if (this.questionInfos[index].ids==this.list[index].answer) {
        console.log(this.list[index].answer)
        this.score=this.score+10;
        console.log(this.score);
      }else{
        this.score=this.score+0;
        console.log(this.score);
      }
      index++;
      this.page++;
      // 当前页等于最后一题 下一题按钮隐藏
      if (this.page == this.list.length - 1) {
        return (this.isShow = false);
      } else {
        return (this.isShow = true);
      }
    },
    submit(n,index){
      if (this.questionInfos[index].ids==this.list[index].answer) {
        console.log(this.list[index].answer)
        this.score=this.score+10;
        console.log(this.score);
      }else{
        this.score=this.score+0;
        console.log(this.score);
      }
      this.ids.push(this.radio.slice(2))
      alert(this.score)

    }
  }
}
</script>

<style scoped>

</style>